<template>
  <view class="page-default">
    <c-nav-bar title="信息收集" type="white" bg-color="rgba(255,255,255,0.6)" />
    <view>
      <view class="bg-green-rgba m-3 mt-6 rounded-4 px-4 py-2 line-height-6">
        <view class="flex">
          <u-icon name="warning-fill" color="#FFB412" size="40" />
          <view class="px-2">
            重要提示：所填信息将录入国家学籍系统，请确保真实有效。
          </view>
        </view>
      </view>
      <view class="content bg-green-white m-3 mt-4 rounded-4 px-4 pb-8 pt-4 line-height-6">
        <template v-for="item in list" :key="item.title">
          <view class="w-full flex items-center justify-between" @click="navigateTo(item.url)">
            <image :src="item.imgUrl" class="h-18 w-18" />
            <view class="flex-1">
              <view class="flex items-center">
                <text class="text-#1A2B5C font-bold">
                  {{ item.title }}
                </text>
                <u-icon v-if="item.status" class="ml-4" name="checkbox-mark" color="#21D155" size="30" />
              </view>
              <view class="text-xs text-#6E7B8B">
                {{ item.subTitle }}
              </view>
            </view>
            <view class="inline-flex items-center justify-center rounded-4 bg-#C5C9D1 px-2px py-2px">
              <u-icon name="arrow-right" size="10" color="#fff" />
            </view>
          </view>
          <view class="px-2">
            <u-line dashed />
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';

const list = ref([
  {
    imgUrl: '/static/images/icon/basic.png',
    title: '个人基本信息',
    subTitle: '个人信息填报',
    status: true,
    url: '/pages/biz/information/form',
  },
  {
    imgUrl: '/static/images/icon/edu.png',
    title: '学籍信息',
    subTitle: '学籍档案补充',
    status: true,
    url: '/pages/biz/information/form-edu',
  },
  {
    imgUrl: '/static/images/icon/sub.png',
    title: '辅助信息',
    subTitle: '辅助信息填写',
    status: false,
    url: '/pages/biz/information/form-sub',
  },
  {
    imgUrl: '/static/images/icon/study.png',
    title: '学习经历',
    subTitle: '学习经历录入',
    status: false,
    url: '/pages/biz/information/form-study',
  },
  {
    imgUrl: '/static/images/icon/score.png',
    title: '中考成绩',
    subTitle: '中考成绩记录',
    status: true,
    url: '/pages/biz/information/form-score',
  },
  {
    imgUrl: '/static/images/icon/relation.png',
    title: '团关系',
    subTitle: '团籍关系备案',
    status: true,
    url: '/pages/biz/information/form-relation',
  },
  {
    imgUrl: '/static/images/icon/parent.png',
    title: '监护人信息',
    subTitle: '监护人资料填写',
    status: false,
    url: '/pages/biz/information/form-parent',
  },
  {
    imgUrl: '/static/images/icon/school.png',
    title: '校园信息',
    subTitle: '在校信息查询',
    status: true,
    url: '/pages/biz/information/form-school',
  },
  {
    imgUrl: '/static/images/icon/id-photo.png',
    title: '证件照',
    subTitle: '证件照片上传',
    status: false,
    url: '/pages/biz/information/photo',
  },
  {
    imgUrl: '/static/images/icon/letter.png',
    title: '证件照片上传',
    subTitle: '承诺签名，严纪优学',
    status: false,
    url: '/pages/biz/information/letter',
  },

]);
const navigateTo = (url) => {
  uni.redirectTo({
    url,
  });
};
</script>

<style lang="scss" scoped>
:deep(uni-page-body) {
  background-color: #f5f9fc !important;
}
.page-default {
  width: 100%;
  min-height: 100vh;
  background: url('@/static/images/welcome/header-bg.png') no-repeat center top;
  background-size: 100% 50%;
}
.bg-green-white {
  background: linear-gradient(to bottom, #f6fdfa, #fff, #fff);
}

.bg-green-rgba {
  background: rgba(231, 246, 234, 0.9);
  border: 1px solid #fff;
}
</style>
